<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-25 18:18:49
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-02-11 10:15:41
 * @Description:转交
-->
<template>
  <el-form
    ref="form"
    label-position="right"
    label-width="128px"
    size="mini"
    :disabled="disabled"
    :model="formData"
  >
    <el-form-item label="原处理人:">
      <span style="color: #879bba">{{
        convertTransHistor(formData.makeHisUserToName)
      }}</span>
    </el-form-item>
    <el-form-item label="转交至">
      <el-input
        ref="sendUserInput"
        v-model="selectedSendEngineer.name"
        style="width: auto"
        @focus="handleOpenEngineerPanel"
      />
    </el-form-item>
    <el-form-item label="转交原因">

      <dic-radio v-model="formData.processValue" dic-key="transReason" type="string" />
    </el-form-item>
    <el-form-item label="详细说明">
      <el-input
        v-model="formData.remark"
        type="textarea"
        :rows="4"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import DicRadio from '@/feat/system/dictionary/normal/component/dicRadio.vue';
import TicketApi from '@/feat/ticket/api';
import { staffId, } from '@/filters';
import EngineerPanel from '@/views/sharedComponents/engineer/engineerPanel.vue';
export default {
  name: 'Forward',
  components: {
    DicRadio,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        processValue: '1',
        remark: null,
      },
      // 指派人信息
      selectedSendEngineer: { name: null,
        id: null,
      },
    };
  },
  methods: {
    async onSubmit(ticketId) {
      await this.$refs.form.validate();
      if (!this.selectedSendEngineer.id) {
        throw new Error('请选择转交人');
      }
      let sendTeam = null;
      let sendUser = null;
      if (this.selectedSendEngineer.isTeam) {
        sendTeam = this.selectedSendEngineer.id?.split('-')[1];
      } else {
        sendUser = this.selectedSendEngineer.id?.split('-')[2];
      }
      await TicketApi.transfer({
        ticketId,
        ...this.formData,
        sendTeam,
        sendUser,
      });
    },
    convertTransHistor(val) {
      if (!val) {
        return staffId(this.selfId);
      } else {
        return val
          .split(',')
          .join('>');
      }
    },
    async handleOpenEngineerPanel() {
      this.$refs.sendUserInput.blur();
      this.$innerDrawer({
        width: '688px',
        component: () => <EngineerPanel onDone={this.handleSelectedEngineer} defaultSelectedData={this.selectedSendEngineer}/>,
      });
    },
    handleSelectedEngineer(data) {
      this.$refs.sendUserInput.blur();
      this.selectedSendEngineer = Object.assign({}, data);
      this.$refs.sendUserInput.blur();
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
